<template>
  <div>
    <el-date-picker
      v-model="value"
      type="datetime"
      placeholder="请选择日期"
      format="YYYY/MM/DD hh:mm:ss"
      value-format="YYYY-MM-DD h:m:s a"
      :disabled="props.disabled"
    />
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  setting: {
    type: Object,
    default: () => {}
  },
  formRules: {
    type: Object,
    default: () => {}
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:modelValue', 'update:formRules'])

const value = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits('update:modelValue', val)
  }
})

const formRules = computed({
  get: () => props.formRules,
  set: (val) => {
    emits('update:formRules', val)
  }
})

const generateRules = () => {
  const rules = []

  if (props.setting.require) {
    rules.push({
      required: true,
      message: '此题为必填题',
      trigger: 'change'
    })
  }

  formRules.value[props.setting.formItemId] = rules
}

onMounted(() => {
  generateRules()
})
</script>

<style lang="scss" scoped>
:deep(.el-date-picker) {
  width: 100%;
}
</style>
